<template>
  <div class="app-container">
    <div style="margin-bottom: 30px">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-input
            placeholder="标题..."
            v-model="queryForm.query"
            clearable
            @keyup.enter="initVoteInfoList(1)"
          ></el-input>
        </el-col>
        <el-col :span="5">
          <el-select
            v-model="queryForm.type"
            placeholder="投票类型..."
            clearable
            filterable
          >
            <el-option
              v-for="item in voteTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-select
            v-model="queryForm.isOver"
            placeholder="是否结束..."
            clearable
            filterable
          >
            <el-option
              v-for="item in isOverArray"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-button
          type="primary"
          :icon="Search"
          @click="initVoteInfoList(1)"
          v-hasPerm="['vote:voteInfo:query']"
          >搜索</el-button
        >
        <el-button @click="resetForm" :icon="Refresh">重置</el-button>
      </el-row>
    </div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      :row-style="{ height: '40px' }"
      :cell-style="{ padding: '0px' }"
      row-class-name="table-row-cls"
    >
      <el-table-column label="封面" prop="avatar" width="80" align="center">
        <template v-slot="scope">
            <el-image
                    :src="pre_url + '/image/userAvatar/' + scope.row.coverImage"
                    :zoom-rate="1.2"
                    :preview-src-list="[pre_url + '/image/userAvatar/' + scope.row.coverImage]" 
                    hide-on-click-modal
                  />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" align="center" />
      <el-table-column
        prop="explanation"
        label="说明"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column prop="type" label="类型" align="center">
        <template v-slot="{ row }">
          {{ row.type == 1 ? "文本" : "图片" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        align="center"
        v-hasPerm="['vote:voteInfo:edit']"
      >
        <template v-slot="{ row }">
          <el-switch
            v-model="row.status"
            @change="statusChangeHandle(row)"
            active-value="0"
            inactive-value="1"
            size="small"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="voteEndTime"
        label="截止时间"
        align="center"
        width="180"
      />
      <el-table-column prop="isOver" label="是否结束" align="center">
        <template v-slot="{ row }">
          {{
            new Date(row.voteEndTime).getTime() > new Date().getTime()
              ? "进行中"
              : "已结束"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="action" label="操作" width="150" align="center">
        <template v-slot="scope">
          <el-button
            v-hasPerm="['vote:voteInfo:query']"
            type="warning"
            :icon="Tools"
            size="small"
            text
            @click="findByIdHandler(scope.row.id)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="queryForm.pageNum"
        v-model:page-size="queryForm.pageSize"
        :page-sizes="[5, 10, 20, 50, 100]"
        :small="false"
        :disabled="false"
        :background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <query-vote
      :dialogVisible="voteDialogVisible"
      v-model="voteDialogVisible"
      :voteId="voteId"
      dialogTitle="投票信息"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getVoteInfoList, updateVoteStatus, findById } from "@/api/voteInfo";
import {
  DArrowRight,
  RefreshRight,
  Search,
  Tools,
  Refresh,
} from "@element-plus/icons-vue";
import QueryVote from "./components/QueryVote.vue";

const tableData = ref([]);
const total = ref(0);
const voteDialogVisible = ref(false);
const voteId = ref(-1);
const pre_url = ref(import.meta.env.VITE_APP_WEB_API);
const voteTypes = ref([
  { label: "全部", value: "" },
  { label: "文本", value: "1" },
  { label: "图片", value: "2" },
]);
const isOverArray = ref([
   { label: "全部", value: "" },
  { label: "进行中", value: "1" },
  { label: "已结束", value: "2" },
]);
const queryForm = ref({
  query: "",
  pageNum: 1,
  pageSize: 5,
  type: "",
  isOver: "",
});

const initVoteInfoList = async (pageNum?: number) => {
  if (pageNum) queryForm.value.pageNum = pageNum;
  let result = await getVoteInfoList(queryForm.value);
  let res = result.data;
  if (res.code == 200) {
    tableData.value = res.data.list;
    total.value = res.data.total;
  }
};
const resetForm = () => {
  queryForm.value = {
    query: "",
    type: "",
    pageNum: 1,
    pageSize: 5,
    isOver: "",
  };
  tableData.value = [];
  initVoteInfoList(1);
};

const handleSizeChange = (val) => {
  queryForm.value.pageSize = val;
  console.log("queryForm", queryForm);
  initVoteInfoList();
};
const handleCurrentChange = (val) => {
  queryForm.value.pageNum = val;
  initVoteInfoList();
};

/**
 * 更新投票信息状态
 */

const statusChangeHandle = async (row) => {
  const res = await updateVoteStatus(row);
  const data = res.data;
  if (data.code == 200) {
    ElMessage({
      type: "success",
      message: data.msg,
    });
  } else {
    ElMessage({
      type: "error",
      message: data.msg,
    });
  }
};
const findByIdHandler = (id: any) => {
  voteId.value = id;
  voteDialogVisible.value = true;
};
onMounted(() => {
  initVoteInfoList();
});
</script>

<style lang="less" scoped>
.app-container {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

.el-table__cell {
  word-break: break-word;
  height: 40px;
  font-size: 13px;
}

.el-tag--small {
  margin-left: 5px;
}
</style>
<style lang="less">
.table-row-cls {
  .el-button + .el-button {
    margin-left: 0;
  }
}
</style>
